<template>
	<view class="page">
		<tpf-nav-bar fixed hasTitle :fixedHeight="navBarConfig.fixedHeight" :title="navBarConfig.title" :left="navBarConfig.left" :right="navBarConfig.right" @getNavBarMaxHeight="getNavBarHeight" @iconTap="navBarIconTap" class="tpfNavBar"></tpf-nav-bar>
		<view class="commission-top-container">
			<view class="tpf-user-info">
				<image class="headimg" :src="list.headimg"></image>
				<text class="nickname">{{list.nickname}}</text>
			</view>
			
			<view class="commission-statistic">
				<view class="commission-statistic-item">
					<text class="commission-statistic-number">{{list.total_money||'0.00'}}</text>
					<text class="commission-statistic-tip">累计总金额</text>
				</view>
				<navigator class="commission-statistic-item" url="/pages/ucenter/commission-detail/commission-detail">
					<text class="commission-statistic-number">{{list.total_profit||'0.00'}}</text>
					<text class="commission-statistic-tip">累计佣金</text>
				</navigator>
				<view class="commission-statistic-item">
					<text class="commission-statistic-number">{{list.total_cashout||'0.00'}}</text>
					<text class="commission-statistic-tip">成功提现</text>
				</view>
			</view>
		</view>
		
		<view class="commission-cash-container">
			<view class="commission-cash-statistic">
				<view class="commission-cash-item">
					<text class="commission-cash-item-label">当前金额（元）</text>
					<text class="commission-cash-item-number">{{list.money||'0.00'}}</text>
				</view>
				<view class="commission-cash-item">
					<text class="commission-cash-item-label">可提现金额（元）</text>
					<text class="commission-cash-item-number">{{list.profit||'0.00'}}</text>
				</view>
				<text class="commission-cash-out-btn" @tap="cashOut">去提现</text>
			</view>
			
			<view class="commission-cash-tip">
				<text class="commission-cash-tip-item" v-for="(tip,tipIndex) of commissionConfig.cashOutTips" :key="tipIndex">{{tipIndex+1}}、{{tip}}</text>
			</view>
		</view>
		
		<view class="ucenter-ext-section">
			<navigator class="ucenter-ext-item flex flex-align-center flex-pack-justify" v-for="(icon,iconIndex) of extListConfig.iconList" :key="iconIndex" hover-class="none" :url="icon.url">
				<tpf-icon :fontFamily="extListConfig.fontFamily" :text="icon.text" :title="icon.title" :vertical="false" :titleStyle="extListConfig.titleStyle"></tpf-icon>
				<tpf-icon :fontFamily="extListConfig.fontFamily" :text="extListConfig.moreIcon.text"></tpf-icon>
			</navigator>
		</view>
		
		<uni-popup ref="cash" type="bottom">
			<view class="cash-pop-wrap">
				<text class="cash-pop-btn" @tap="doCastOut(btn.id)" :style="btn.style" v-for="(btn,btnIndex) of commissionConfig.cashOutItems" :key="'btn'+btnIndex">{{btn.text}}</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from '@/mixins/ucenter/commission-statistic/commission-statistic.js'
	import data from '@/data/ucenter/commission-statistic/commission-statistic.js'
	export default{
		mixins:[config],
		data(){
			return {
				list:[]
			}
		},
		async created(){
			const statisticList = data.getStatisticList();
			this.list = await statisticList;
		},
		methods:{
			getNavBarHeight(e){
				
			},
			navBarIconTap(e){
				let that = this;
				const action={
					back(){
						that.$Helper.tpfJump({type:"navigateBack"});
					},
					message(){
						that.$Helper.tpfJump({url:"/pages/ucenter/message-lists/message-lists"});
					}
				}
				if(action[e]) action[e]();
			},
			cashOut(){
				if(this.list.profit==0 || this.list.profit=="0.00"){
					this.$Helper.tpfToast({title:"提现金额不足"});return false;
				}
				this.$refs.cash.open();
			},
			doCastOut(id){
				this.$Helper.tpfJump({url:"/pages/ucenter/cash-out/cash-out?type="+id+"&profit="+this.list.profit});
			}
		}
	}
</script>

<style lang="scss">
.page{
	height: 100vh;
}
.tpfNavBar{
	background-color:#095296;
}
.commission-top-container{
	background-color:#095296;
	padding: 20rpx 20px 120rpx;
}
.tpf-user-info{
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
}
.tpf-user-info .headimg{
	width:120rpx;
	height: 120rpx;
	border-radius: 50%;
}
.tpf-user-info .nickname{
	color: #FFFFFF;
	padding-left: 20rpx;
	font-size:$uni-font-size-base;
}
.commission-statistic{
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	color: #FFFFFF;
	font-size:$uni-font-size-base;
	justify-content: space-between;
	padding: 80rpx 0;
}
.commission-statistic-item{
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	text-align: center;
}
.commission-statistic-number{
	font-size:$uni-font-size-base*1.2;
}
/* 提现 */
.commission-cash-container{
	background-color: #FFFFFF;
	border-radius:30rpx;
	padding:30rpx;
	color: #333333;
	font-size:$uni-font-size-base;
	width: 710rpx;
	box-sizing: border-box;
	margin:-160rpx 20rpx 0;
}
.commission-cash-statistic{
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content:space-between;
	align-items:flex-start;
	margin-bottom: 30rpx;
}
.commission-cash-item{
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
}
.commission-cash-item-number{
	font-size: $uni-font-size-base*1.2;
	margin-top: 20rpx;
	color: #ff9b42;
}
.commission-cash-out-btn{
	background-color: #ff9b42;
	color: #FFFFFF;
	padding: 10rpx 18rpx;
	border-radius:10rpx;
}
.commission-cash-tip{
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	font-size: $uni-font-size-base;
}
.commission-cash-tip-item{
	margin-top: 10rpx;
	line-height: 200%;
}

.ucenter-ext-section{
	background-color: #FFF;
	margin: 20rpx 0;
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 0px;
	border-radius:0rpx;
}
.ucenter-ext-item {
	padding: 20rpx;
	border-bottom-color: #dfdfdf;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
.ucenter-ext-section .ucenter-ext-item:last-child{
	border-bottom-style: none;
}

.cash-pop-wrap{
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction:column;
	font-size: $uni-font-size-base;
	background-color: #FFFFFF;
	padding: 20rpx;
}
.cash-pop-btn{
	text-align: center;
	margin-bottom: 20rpx;
	background-color: #04be02;
	color: #FFFFFF;
	padding: 20rpx 0;
}
.cash-pop-wrap .cash-pop-btn:last-child{
	margin-bottom: 0;
}
</style>
